<!-- TODO:还没适配 -->
<template>
    <div class="login" id="login-app">
        <div class="login-box">
            <img src="../../images/login/login-l.png" alt="">
            <div class="login-form">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                    <div class="login-form-title">
                        <img src="../../images/login/logo.png" style="width:150px;height:150px;" alt="" />
                    </div>
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" autocomplete="off" placeholder="账号"
                            maxlength="20" prefix-icon="el-icon-s-custom" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="el-icon-lock"
                            maxlength="20" @keyup.enter.native="handleLogin" />
                    </el-form-item>
                    <el-form-item prop="confirm">
                        <el-input v-model="loginForm.confirm" type="password" placeholder="确认密码" prefix-icon="el-icon-lock"
                            maxlength="20" @keyup.enter.native="handleLogin" />
                    </el-form-item>
                    <div style="display: flex; justify-content: space-between; margin-top: 15px; margin-bottom: 10px">
                        <el-link type="primary" href="login.html">已有账号？</el-link>
                        <el-link type="primary" href="forget.html">忘记密码</el-link>
                    </div>
                    <el-form-item style="width:100%;">
                        <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
                            @click.native.prevent="handleLogin">
                            <span v-if="!loading">注册</span>
                            <span v-else>注册中...</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
  
<script>
import SignApi from '../../api/login.js';

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                confirm: '',
            },
            loading: false,
        };
    },
    computed: {
        loginRules() {
            const validateUsername = (rule, value, callback) => {
                if (value.length < 1) {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };

            const validatePassword = (rule, value, callback) => {
                if (value.length < 6) {
                    callback(new Error('密码必须在6位以上'));
                } else {
                    callback();
                }
            };

            const validateConfirm = (rule, value, callback) => {
                if (value !== this.loginForm.password) {
                    callback(new Error('两次密码输入不一致'));
                } else {
                    callback();
                }
            };

            return {
                'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
                'password': [{ 'validator': validatePassword, 'trigger': 'blur' }],
                'confirm': [{ 'validator': validateConfirm, 'trigger': 'blur' }],
            };
        },
    },
    created() {
    },
    methods: {
        async handleLogin() {
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    let res = await SignApi(this.loginForm);
                    if (String(res.code) === '1') {
                        localStorage.setItem('userInfo', JSON.stringify(res.data));
                        window.location.href = 'login.html';
                    } else {
                        this.$message.error(res.data.msg);
                        this.loading = false;
                    }
                }
            });
        },
    },
};
</script>
  
<style scoped>
.body {
    min-width: 1366px;
}</style>
  